<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px" id="lottery-table">
    <tr>
        <th>用户</th>
    </tr>
    <tr th:each="user:${lotteryUser}">
        <td th:text="${user.username}"></td>
    </tr>
</table>
请输入抽奖人数：<input type="text" id="lottery-count"/>
<span>
    <input type="button" value="抽奖" name="lottery" onclick="lottery()"></input>
</span>
</body>
<script>
    function lottery() {
        $.ajax({
            type: "get",
            url: "/user/lottery/lotterying/"+$("#lottery-count").val(),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                console.log(data)
                var lottery_name=""
                for(var index in data){
                    console.log(data[index])
                    lottery_name+=(parseInt(index)+1)+"."
                    lottery_name+=data[index].username
                    lottery_name+=" "
                }
                alert("中奖成员为："+lottery_name)
            },
            error: function (data) {
                console.log(data)
                alert("抽奖失败："+data)
            }
        })
    }
</script>
</html>